<html manifest="IGNORE.manifest" lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css"  th:href="@{${uiPath} + ${appName} +'/css/reset.css'}"/>
	 <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"  th:href="@{${uiPath} + ${appName} +'/css/swiper.min.css'}">
    <link rel="stylesheet" type="text/css" href="../css/cl.css" th:href="@{${uiPath} + ${appName} +'/css/cl.css'}" />
    <link rel="stylesheet" type="text/css" href="../css/zdialog.css"
          th:href="@{${uiPath} + ${appName} + '/css/zdialog.css'}"/>
</head>
<body>
<div id="shangouciaxiagq" class="zong">
     <div class="toubu">
       <a href=""><img class="fanhui" src="../images/raw_1503386635.png" th:src="@{${uiPath} + ${appName} +'/images/raw_1503386635.png'}" alt=""></a>
       <p class="bitoati">商品详情</p>
       <a href="">
          <p class="shouye">首页</p>
       </a>
     </div> 
     <div class="kuai"> </div> 
     <div class="swiper-container" id="swiper-container2">
	   <div class="swiper-wrapper">
         <div class="swiper-slide" th:each="goodsModel:${data.modelList}" >
               <img id="dtupianzd" class="shangpindatu" src="../images/raw_1503371112.jpeg" alt="" th:src="${goodsModel.imgUrl}">
         </div>
	  </div>
	 <div class="swiper-pagination"></div>
   </div> 
    <!-- <div>
      <img id="dtupianzd" class="shangpindatu" src="../images/raw_1503923503.jpeg" alt="">
    </div>  -->
    <div class="spinminfzi">
      <p id="spinname" class="nametype"><b th:utext="${data.goodsName}">黄金沙</b></p>
    </div> 
    <div class="spinminfzi">
      <p class="shopprice" th:utext="'￥:'+${materialGoodsModel.price}+'/'+${data.unit}"></p>
    </div> 
    <div class="tuige">
    <ul>
       <li class="yitiaotiaode">
           <p class="biote">商品规格：</p>
           <div class="guigecaip">
             <p class="subbiote"  th:each="goodsModel:${data.modelList}" th:onclick="'openSelect(this)'" th:data="${goodsModel.modelId}" >
                 <span class="guigecs" th:utext="${goodsModel.modelName}">黄金沙一号</span>
                 <span class="guigecs" th:utext="${goodsModel.size}">100*5*2</span>
                 <span class="guigecs" th:text="${goodsModel.color}">砖红色</span>
                 <span class="guigecs" th:text="${goodsModel.price}">1200元</span>
             </p>
           </div>
       
       </li>
        <li class="yitiaotiaode" th:if="${data.hasInstall==1}">
            <p class="biote">是否安装：</p>
            <div class="guigecaip">
                <p class="subbiote" th:onclick="'openSelect1(this)'"  th:data="${data.hasInstall}">
                    <span class="guigecs1">提供安装</span>
                    <span class="guigecs1" th:utext="${data.installPrice}+'/'+${data.unit}"></span>
                </p>
                <p class="subbiote" th:data="0" th:onclick="'openSelect1(this)'">
                    <span class="guigecs1">不提供安装</span>
                </p>
            </div>
        </li>
        <li class="yitiaotiaode" th:if="${data.hasInstall==0}">
            <p class="biote">是否安装：</p>
            <div class="guigecaip">
                <p class="subbiote open1" th:data="${data.hasInstall}">
                    <span class="guigecs">不提供安装</span>
                </p>
            </div>

        </li>
        <li class="yitiaotiaode">
              <p class="biote">库存量：</p>
              <p class="subbiotew">
                  <span class="kuziunlamount" th:utext="${data.amount}">200000</span></p>
        </li>
         <li class="yitiaotiaode">

             <input class="jian" type="button" value="-" onclick="jianclick()">
              <input class="xian" type="text" value="0" >
              <input class="jia" type="button" value="+" onclick="jiaclick()">
         </li>
    </ul>
     
     
     
    </div>
    
    <div class="denifeilei">
      <p>分类：<span class="feixlieisname"  th:utext="${data.materialGoodsTypeSmall.smallName}"></span></p>
      <p>商品描述：<span class="spinmiaoshud" th:utext="${data.description}"></span></p>
      <p>商品详情:</p>
    </div>
    <div class="tupiande">
     <img src="../images/raw_1503371112.jpeg" alt="" th:each="goodsModel:${data.modelList}" th:src="${goodsModel.imgUrl}" >
    </div>
    <div class="kehupingjia">
      <p class="pingjia">客户评价</p>
    </div>
    <div class="yonghupp">
      <div class="pingii">
        <dl>
        <dt class="dddefrtg">
          <img class="ttoucs" src="../images/raw_1503974720.png" alt="" th:src="@{${uiPath} + ${appName} +'/images/raw_1503974720.png'}" >
        </dt>
        <dd class="ioik">
           <p>商品名称：<span>木窗</span></p>
           <p>商品规格：<span>2.5米 * 2.5米</span> </p>
           <p class="pinfje">评价：<span>质量很好，很结实,健康更了解诶考虑是否觉得计划开发的反间谍法,接口连接诶见对方的身份绝地反击代课老师</span></p>
        </dd> 
        </dl>
         <div class="xiaobai"></div>
      </div>
      <div class="pingii">
        <dl>
        <dt class="dddefrtg">
          <img class="ttoucs" src="../images/raw_1503974720.png" alt="" th:src="@{${uiPath} + ${appName} +'/images/raw_1503974720.png'}">
        </dt>
        <dd class="ioik">
           <p>商品名称：<span>木窗</span></p>
           <p>商品规格：<span>2.5米 * 2.5米</span> </p>
           <p class="pinfje">评价：<span>质量很好，很结实，质量杠杠的杠杠的</span></p>
        </dd> 
        </dl>
        <div class="xiaobai"></div>
      </div>
    </div>
    <div class="goum">
    <p class="gouwuche" onclick="gouwuche()">加入购物车</p>
        <form id="commentForm" th:action="@{'/orderCart/saveCart'}" method="post">
            <input type="hidden" name="modelId" value="" id="modelId">
            <input type="hidden" name="goodsId" th:value="${data.goodsId}">
            <input type="hidden" name="count" id="count">
        </form>
        <form id="commentGmForm" th:action="@{'/orderUser/saveOrder'}" method="post">
        </form>
        <p class="lijigoumai" onclick="lijigoumai()">立即购买</p>
  
    </div>
</div>
<script type="text/javascript" src="../js/flexible.js" th:src="@{${uiPath} + ${appName} + '/js/flexible.js'}"></script>
<script type="text/javascript" src="../js/jquery.min.js" th:src="@{${uiPath} + ${appName} + '/js/jquery.min.js'}"></script>
<script type="text/javascript" src="../js/swiper.min.js"  th:src="@{${uiPath} + ${appName} + '/js/swiper.min.js'}"></script>
<script type="text/javascript" src="../js/cl.js" th:src="@{${uiPath} + ${appName} + '/js/cl.js'}"></script>
<script type="text/javascript" src="../js/zdialog.js" th:src="@{${uiPath} + ${appName} + '/js/zdialog.js'}"></script>

<script th:inline="javascript">
    function openSelect(obj){
        $('.open').removeClass('open');
        $(obj).addClass('open');
    }
    function openSelect1(obj){
        $('.open1').removeClass('open1');
        $(obj).addClass('open1');
    }

    function gouwuche(){
        $.DialogByZ.Loading(/*[[${uiPath}+${appName}+'/images/loading.png']]*/);
        var orderCart = [];
        var a=$('.open').attr('data');
        var b=$('.xian').val();
        var c=$('.open1').attr('data');

var stuAnswer = { 'goodsId': [[${data.goodsId}]], 'modelId': a, 'count': b};

        $.ajax({
            beforeSend: function () {
                if(a==null){
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "失败", Content: "请选择型号", BtnL: "确定"})
                    return false;

                }
                if(b<=0){
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "失败", Content: "数量必须大于0", BtnL: "确定"})
                    return false;

                }
            },
            type:'post',
            dataType:'json',
            data:{'modelId':a,'goodsId':[[${data.goodsId}]],'count':b,'shopId':[[${data.shopId}]],'installId':c},
            url: $('#commentForm').attr('action'),
            success: function (result) {
                if (result.code == 1) {
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交成功", Content: result.data, BtnL: "确定"})
                } else {
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交失败", Content: result.data, BtnL: "确定"})
                }
            }

        })
    }
    function lijigoumai(){
        $.DialogByZ.Loading(/*[[${uiPath}+${appName}+'/images/loading.png']]*/);
        var orderCart = [];
        var a=$('.open').attr('data');
        var b=$('.xian').val();
        var c=$('.open1').attr('data');

        var stuAnswer = { 'goodsId': [[${data.goodsId}]], 'modelId': a, 'count': b};

        $.ajax({
            beforeSend: function () {
                if(a==null){
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "失败", Content: "请选择型号", BtnL: "确定"})
                    return false;

                }
                if(b<=0){
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "失败", Content: "数量必须大于0", BtnL: "确定"})
                    return false;

                }
            },
            type:'post',
            dataType:'json',
            data:{'modelId':a,'goodsId':[[${data.goodsId}]],'count':b,'shopId':[[${data.shopId}]],'installId':c},
            url: $('#commentGmForm').attr('action'),
            success: function (result) {
                if (result.code == 1) {
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交成功", Content: result.data, BtnL: localhrefZjDd()})
                } else {
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交失败", Content: result.data, BtnL: localhrefZjDd})
                }
            }

        })

    }
    function localhref() {
        window.location.href = "/materialGoods/index"

    }
    function localhrefZjDd() {
        window.location.href = "/orderUser/orderQr"

    }
    function jiaclick(){
        var a=$('.xian').val();

        $('.xian').val(parseInt(a)+parseInt(1));
    }
    function jianclick(){
        var a=$('.xian').val();
        if(parseInt(a)==0){
           alert("最小为0");}
           else{
            $('.xian').val(parseInt(a)-parseInt(1));
        }
        }
</script>
</body>
</html>